import React from 'react';
import ReactDOM from 'react-dom';

import MatchSchedule_bg from './assets/赛程表背景图.svg';
import  './MatchSchedule.css';



class MatchSchedule extends React.Component {
	render(){
		return(
		<div id='赛程表' className='MatchSchedule_bg'>
			<img src={MatchSchedule_bg} style={{width:'1050px',height:'680px'}}></img>
			<button className='MatchScheduleButton1-A-1 font1'>俄罗斯 - 沙特阿拉伯</button>
			<button className='MatchScheduleButton1-A-2 font1'>埃及 - 乌拉圭</button>
			<button className='MatchScheduleButton1-A-3 font1'>俄罗斯 - 埃及</button>
			<button className='MatchScheduleButton1-A-4 font1'>乌拉圭 - 沙特阿拉伯</button>
			<button className='MatchScheduleButton1-A-5 font1'>乌拉圭 - 俄罗斯</button>
			<button className='MatchScheduleButton1-A-6 font1'>沙特阿拉伯 - 埃及</button>
			<button className='MatchScheduleButton1-B-1 font1'>葡萄牙 - 西班牙</button>
			<button className='MatchScheduleButton1-B-2 font1'>摩洛哥 - 伊朗</button>
			<button className='MatchScheduleButton1-B-3 font1'>葡萄牙 - 摩洛哥</button>
			<button className='MatchScheduleButton1-B-4 font1'>伊朗 - 西班牙</button>
			<button className='MatchScheduleButton1-B-5 font1'>伊朗 - 葡萄牙</button>
			<button className='MatchScheduleButton1-B-6 font1'>西班牙 - 摩洛哥</button>
			<button className='MatchScheduleButton1-C-1 font1'>法国 - 澳大利亚</button>
			<button className='MatchScheduleButton1-C-2 font1'>秘鲁 - 丹麦</button>
			<button className='MatchScheduleButton1-C-3 font1'>法国 - 秘鲁</button>
			<button className='MatchScheduleButton1-C-4 font1'>丹麦 - 澳大利亚</button>
			<button className='MatchScheduleButton1-C-5 font1'>丹麦 - 法国</button>
			<button className='MatchScheduleButton1-C-6 font1'>澳大利亚 - 秘鲁</button>
			<button className='MatchScheduleButton1-D-1 font1'>阿根廷 - 冰岛</button>
			<button className='MatchScheduleButton1-D-2 font1'>克罗地亚 - 尼日利亚</button>
			<button className='MatchScheduleButton1-D-3 font1'>阿根廷 - 克罗地亚</button>
			<button className='MatchScheduleButton1-D-4 font1'>尼日利亚 - 冰岛</button>
			<button className='MatchScheduleButton1-D-5 font1'>尼日利亚 - 阿根廷</button>
			<button className='MatchScheduleButton1-D-6 font1'>冰岛 - 克罗地亚</button>
			<button className='MatchScheduleButton1-E-1 font1'>巴西 - 瑞士</button>
			<button className='MatchScheduleButton1-E-2 font1'>哥斯达黎加 - 塞尔维亚</button>
			<button className='MatchScheduleButton1-E-3 font1'>巴西 - 哥斯达黎加</button>
			<button className='MatchScheduleButton1-E-4 font1'>塞尔维亚 - 瑞士</button>
			<button className='MatchScheduleButton1-E-5 font1'>塞尔维亚 - 巴西</button>
			<button className='MatchScheduleButton1-E-6 font1'>瑞士 - 哥斯达黎加</button>
			<button className='MatchScheduleButton1-F-1 font1'>德国 - 墨西哥</button>
			<button className='MatchScheduleButton1-F-2 font1'>瑞典 - 韩国</button>
			<button className='MatchScheduleButton1-F-3 font1'>德国 - 墨西哥</button>
			<button className='MatchScheduleButton1-F-4 font1'>德国 - 瑞典</button>
			<button className='MatchScheduleButton1-F-5 font1'>韩国 - 墨西哥</button>
			<button className='MatchScheduleButton1-F-6 font1'>墨西哥 - 瑞典</button>
			<button className='MatchScheduleButton1-G-1 font1'>比利时 - 巴拿马</button>
			<button className='MatchScheduleButton1-G-2 font1'>突尼斯 - 英格兰</button>
			<button className='MatchScheduleButton1-G-3 font1'>比利时 - 突尼斯</button>
			<button className='MatchScheduleButton1-G-4 font1'>英格兰 - 巴拿马</button>
			<button className='MatchScheduleButton1-G-5 font1'>英格兰 - 比利时</button>
			<button className='MatchScheduleButton1-G-6 font1'>巴拿马 - 突尼斯</button>
			<button className='MatchScheduleButton1-H-1 font1'>波兰 - 塞内加尔</button>
			<button className='MatchScheduleButton1-H-2 font1'>哥伦比亚 - 日本</button>
			<button className='MatchScheduleButton1-H-3 font1'>波兰 - 哥伦比亚</button>
			<button className='MatchScheduleButton1-H-4 font1'>日本 - 塞内加尔</button>
			<button className='MatchScheduleButton1-H-5 font1'>日本 - 波兰</button>
			<button className='MatchScheduleButton1-H-6 font1'>塞内加尔 - 哥伦比亚</button>
			<div className='MatchScheduleButton2-1A-2B font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1A-2B</text>
				<text style={{marginTop:'9px'}}>乌拉圭 - 葡萄牙</text>
			</div>
			<div className='MatchScheduleButton2-1C-2D font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1C-2D</text>
				<text style={{marginTop:'9px'}}>法国 - 阿根廷</text>
			</div>
			<div className='MatchScheduleButton2-1E-2F font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1E-2F</text>
				<text style={{marginTop:'9px'}}>巴西 - 葡萄牙</text>
			</div>
			<div className='MatchScheduleButton2-1G-2H font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1G-2H</text>
				<text style={{marginTop:'9px'}}>比利时 - 日本</text>
			</div>
			<div className='MatchScheduleButton2-1B-2A font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1B-2A</text>
				<text style={{marginTop:'9px'}}>西班牙 - 俄罗斯</text>
			</div>
			<div className='MatchScheduleButton2-1D-2C font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1D-2C</text>
				<text style={{marginTop:'9px'}}>克罗地亚 - 丹麦</text>
			</div>
			<div className='MatchScheduleButton2-1F-2E font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1F-2E</text>
				<text style={{marginTop:'9px'}}>瑞典 - 瑞士</text>
			</div>
			<div className='MatchScheduleButton2-1H-2G font2'>
				<text style={{marginTop:'10px'}}>1 / 8 Final  1H-2G</text>
				<text style={{marginTop:'9px'}}>哥伦比亚 - 英格兰</text>
			</div>
			<div className='MatchScheduleButton2-4Final-1 font2'>
				<text style={{marginTop:'9px',fontSize:'10px'}}>1 / 4 Final </text>
				<text style={{marginTop:'9px'}}>乌拉圭 - 法国</text>
			</div>
			<div className='MatchScheduleButton2-4Final-2 font2'>
				<text style={{marginTop:'9px',fontSize:'10px'}}>1 / 4 Final </text>
				<text style={{marginTop:'9px'}}>巴西 - 比利时</text>
			</div>
			<div className='MatchScheduleButton2-4Final-3 font2'>
				<text style={{marginTop:'9px',fontSize:'10px'}}>1 / 4 Final </text>
				<text style={{marginTop:'9px'}}>俄罗斯 - 克罗地亚</text>
			</div>
			<div className='MatchScheduleButton2-4Final-4 font2'>
				<text style={{marginTop:'9px',fontSize:'10px'}}>1 / 4 Final </text>
				<text style={{marginTop:'9px'}}>瑞典 - 英格兰</text>
			</div>

		</div>
		);
	}
}

export default MatchSchedule;